<template>
    <div class="communicate">
        <div class="operate">
            <el-button type="primary" @click="addComment">写评论</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入名称查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>   
        </div>
        <div class="content">
            <el-scrollbar height="596px" v-loading="loading">
                <ul class="CommentList">
                    <li v-for="(item,index) in ListData" :key="index">
                        <div class="CommentMain">
                            <div class="listContent">
                                <b>{{ item.uname }}</b>
                                <data>{{ item.content }}</data>
                                <figure v-if="item.pName!=null" @click="handlePictureCard(item)">
                                    <img :src="item.pName" />
                                </figure>
                                <span style="margin-right: 25px;display: block;">
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        content="点击删除"
                                        v-if="userMessage.id == item.uid"
                                        placement="top-start">
                                            <el-icon class="com_icon_red" @click="deleteCommuniate(item)"><Delete /></el-icon>
                                    </el-tooltip>
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        content="点赞"
                                        placement="top-start">
                                            <el-icon class="com_icon_red" v-if="item.likeState == null||item.likeState.length==0" @click="likeCommuniate(item)"><Star /></el-icon>
                                            <el-icon class="com_icon_red" style="color: red;" v-else @click="likeCommuniate(item)"><StarFilled /></el-icon>
                                    </el-tooltip>
                                    <el-tooltip
                                        class="box-item"
                                        effect="dark"
                                        content="点击回复"
                                        placement="top-start">
                                    <el-icon class="com_icon_red" @click="replyText(item)"><Edit /></el-icon>
                                </el-tooltip>
                                <time>{{ item.createTime }}</time></span>
                            </div>
                            <div class="listReply">
                                <ul class="listReplys">
                                    <li v-for="(it,i) in item.reply" :key="i">
                                        <b>{{ it.uname }} <span style="font-size: 12px;margin-right: 6px;font-weight: normal;">回复</span>{{ it.rname }}</b>
                                        <data>{{ it.content }}</data>
                                        <figure v-if="it.pName!=null" @click="handlePictureCard(it)" style="max-width: 170px;">
                                            <img :src="it.pName" />
                                        </figure>
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="点赞"
                                            placement="top-start">
                                                <el-icon class="com_icon_red" v-if="it.likeState==null||it.likeState.length==0" @click="likeCommuniate(it)"><Star /></el-icon>
                                                <el-icon class="com_icon_red" style="color: red;" v-else @click="likeCommuniate(it)"><StarFilled /></el-icon>
                                        </el-tooltip>
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="点击回复"
                                            placement="top-start">
                                                <el-icon class="com_icon_red" @click="replyText(it)"><Edit /></el-icon>
                                        </el-tooltip>
                                        <span style="display: block;margin-right: 13px;">
                                            <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                v-if="userMessage.id == it.uid"
                                                content="点击删除"
                                                placement="top-start">
                                                    <el-icon class="com_icon_red" @click="deleteReply(it)"><Delete /></el-icon>
                                            </el-tooltip>
                                            <time>{{ it.createTime }}</time>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </el-scrollbar>
        </div>
        <el-drawer
            v-model="drawer"
            title="写评论"
            direction="rtl">
            <div>
                <el-form
                    label-position="top"
                    label-width="100px"
                    :model="formData"
                    style="max-width: 460px"
                >
                    <el-form-item label="内容">
                        <el-input :rows="2" v-model="formData.content" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                        <el-upload action="#" 
                            list-type="picture-card"
                            :on-change="handleChange"        
                            :file-list="fileList"
                            multiple="false"
                            :on-remove="handleRemove"
                            :auto-upload="false">
                        <el-icon><Plus /></el-icon>
                        <template #file="{ file,fileList }">
                        <div style="width: 100px;height: 100px;display: inline-block;">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-delete"
                                    @click="handleRemove(file,fileList)"
                                >
                                    <el-icon><Delete /></el-icon>
                                </span>
                            </span>
                        </div>
                        </template>
                    </el-upload>
                    <el-form-item>
                        <span class="tipImage">小提示：因技术原因，当前只能上传一张图片。如有操作不适，深感抱歉！！！</span>
                    </el-form-item>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="release">发布</el-button>
                        <el-button @click="drawer=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
        <el-dialog
            v-model="dialog.dialogVisible"
            title="图片"
            width="40%">
            <div class="dialogImage">
                <img :src="dialog.PictureSrc" />
            </div>
        </el-dialog>
        <el-dialog
            v-model="dialog.replayflag"
            :title="ReplayTitle"
            width="40%">
            <div class="inputContent">
                <el-form>
                    <el-form-item label="内容">
                        <el-input v-model="formData.content" :rows="3" type="textarea" placeholder="请输入回复内容" />
                    </el-form-item>
                    <el-form-item label="图片">
                        <el-upload action="#" 
                                style="display: inline-block;"
                                list-type="picture-card"
                                :on-change="handleChange"
                                :file-list="fileList"
                                multiple="false"
                                :on-remove="handleRemove"
                                :auto-upload="false">
                            <el-icon><Plus /></el-icon>
                            <template #file="{ file,fileList }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span
                                        class="el-upload-list__item-delete"
                                        @click="handleRemove(file,fileList)"
                                    >
                                        <el-icon><Delete /></el-icon>
                                    </span>
                                </span>
                            </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit()">回复</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
import utils from '@/util/utils'
export default defineComponent({
    data(){
        return{
            userMessage:null,
            searchName:'',
            formData:{
                "content":''
            },
            dialog:{
                dialogVisible:false,
                PictureSrc:'',
                replayflag:false,
                replayMsg:null
            },
            current:0,
            end:10,
            ReplayTitle:'回复',
            loading:true,
            drawer:false,
            fileList:[],
            ListData:[]
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.userMessage = this.store.state.UserMessage;
        if(this.userMessage==null) return;
        this.loadData()
    },
    methods:{
        loadData(){
            let self = this;
            self.$http.get(`${self.baseUrl}/communicate/selectName?name=&id=${this.userMessage.Id}&current=${self.current}&end=${self.end}`).then(res=>{
                if(res.data.code == 404){
                    ElMessage({
                        message:res.data.msg,
                        type:'error'
                    })
                    return;
                }
                let { data , path} = res.data;
                self.dealData(data,path);
                self.loading = false;
            })
        },
        dealData(data,path){
            if(data==null) return;
            for(let i=0;i<data.length;i++){
                if(data[i].reply!=null&&data[i].reply.length>0){
                    this.dealData(data[i].reply,path);
                }
                if(data[i].pName ==null){
                    continue;
                }
                data[i].pName = `${path}\\${data[i].pName}`;
            }
            this.ListData = data;
        },
        addComment(){
            this.formData.content = '';
            this.drawer = true;
        },
        handleChange(file){
            this.fileList = []
            this.fileList.push(file)
        },
        handleRemove(){
            this.fileList = [];
        },
        handlePictureCard(msg){
            this.dialog.dialogVisible = true;
            this.dialog.PictureSrc = msg.pName;
        },
        release(){
            let self = this;
            let fromdata = new FormData();
            fromdata.append("content",self.formData.content);
            fromdata.append("uid",self.userMessage.Id);
            fromdata.append("uname",self.userMessage.name?self.userMessage.name:self.userMessage.userName);
            if(self.fileList.length>0) fromdata.append("files",self.fileList[0].raw);
            self.$http.post(`${self.baseUrl}/communicate/addCommunicate`,fromdata,{
                headers: { 
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res=>{
                if(res.data !=0){
                    ElMessage({
                        message:"发布成功",
                        type:'success'
                    })
                    utils.addIntegral(self.baseUrl,self.userMessage.Id,utils.integral.release);
                    self.drawer = false;
                    self.loadData();
                }
            }) 
        },
        search(){
            let self = this;
            self.$http.get(`${self.baseUrl}/communicate/selectName?name=${self.searchName}&current=${self.current}&end=${self.end}`).then(res=>{
                let { data , path} = res.data;
                self.dealData(data,path);
            })
        },
        replyText(msg){
            this.dialog.replayflag = true;
            this.dialog.replayMsg = msg;
            this.ReplayTitle = `回复--${msg.uname}`;
            this.formData.content = ""
            this.fileList = [];
        },
        // 回复
        onSubmit(){
            let self = this;
            let fromdata = new FormData();
            fromdata.append("uid",self.userMessage.Id);
            fromdata.append("uname",self.userMessage.name?self.userMessage.name:self.userMessage.userName);
            fromdata.append("rid",this.dialog.replayMsg.Uid);
            fromdata.append("rname",this.dialog.replayMsg.uname);
            if(this.dialog.replayMsg.hid != void 0){
                fromdata.append("hid",this.dialog.replayMsg.hid);
            }else{
                fromdata.append("hid",this.dialog.replayMsg.id);
            }
            fromdata.append("content",self.formData.content);
            if(self.fileList.length>0) fromdata.append("files",self.fileList[0].raw);
            self.$http.post(`${self.baseUrl}/communicate/addReply`,fromdata,{
                headers: { 
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res=>{
                if(res.data!=0){
                    ElMessage({
                        message:"回复成功",
                        type:'success'
                    })
                    self.dialog.replayflag = false;
                    self.loadData();
                    utils.addIntegral(self.baseUrl,self.userMessage.Id,utils.integral.reply);
                }else{
                    ElMessage({
                        message:"回复失败",
                        type:'error'
                    })
                }
            })
        },
        deleteCommuniate(msg){
            let self = this;
            ElMessageBox.confirm(
                '确定要删除此评论吗？',
                '删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
            .then(() => {
                self.$http.get(`${self.baseUrl}/communicate/deleteCommunicate?id=${msg.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            type: 'success',
                            message: '删除成功'
                        })
                        self.loadData();
                    }
                })
            }).catch(() => {})
        },
        deleteReply(msg){
            let self = this;
            ElMessageBox.confirm(
                '确定要删除此评论吗？',
                '删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
            .then(() => {
                self.$http.get(`${self.baseUrl}/communicate/deleteReply?id=${msg.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            type: 'success',
                            message: '删除成功'
                        })
                        self.loadData();
                    }
                })
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        },
        likeCommuniate(msg){
            let row = {
                "postId":msg.id,
                "publisherId":msg.uid,
                "userId":this.userMessage.Id,
                "username":this.userMessage.userName
            }
            let self = this;
            self.$http.post(`${self.baseUrl}/like/addLike`,row).then(res=>{
                if(res.data !=0){
                    ElMessage({
                        message:"点赞成功",
                        type:'success'
                    })
                    self.drawer = false;
                    self.loadData();
                }
            }) 
            console.log(msg)
        }
    }
})
</script>
<style>
    .inputContent .el-upload{
        width: 90px;
        height: 90px;
    }
    .inputContent .el-upload-list li{
        width: 100px;
        height: 100px;
        display: inline-block;
    }
</style>
<style scoped>
    .com_icon_red{
        color: red !important;
    }
    .search{
        float: right;
    }
    .content{
        width: 100%;
        height: 100%;
        margin-top: 20px;
    }
    .listContent{
        overflow: hidden;
    }
    .listContent b{
        margin: 7px 0 2px 18px;
        display: block;
    }
    .el-icon{
        float: right;
        color: #666;
        margin-left: 8px;
        cursor: pointer;
    }
    .CommentList li{
        list-style-type: none;
        width: 99%;
        height: auto;
        overflow: hidden;
        border-radius: 10px;
        margin: 10px 10px;
        padding-bottom: 9px;
        border-bottom: 1px solid #ccc;
    }
    .listContent b{
        font-style: normal;
        margin: 12px 0 8px 24px;
        display: block;
        color: #683a3a;
        font-size: 18px;
    }
    .listContent data{
        display: block;
        width: 92%;
        margin: 1px auto -4px auto;
        text-indent: 2em;
        color: #636060;
    }
    .listContent time{
        float: right;
        display: block;
        color: #666;
        font-size: 13px;
        margin-right: 11px;
    }
    .listReply{
        width: 92%;
        margin: auto;
        background-color: #eaeaea;
        border-radius: 10px;
    }
    .listReplys{
        width: 100%;
        height: auto;
    }
    .listReplys li{
        box-shadow: none;
        border-bottom: 1px dashed #b5acac;
    }
    .listReplys li:last-child{
        border: none;
    }
    .listReplys li b{
        display: block;
        margin: 5px 0 0 6px;
        font-size: 14px;
        color: #575f60;
    }
    .listReplys li data{
        display: block;
        font-size: 14px;
        text-indent: 2em;
        margin: 7px 0 -2px 0;
        color: #7a7575;
    }
    .listReplys li time{
        display: block;
        float: right;
        margin-right: 23px;
        font-size: 13px;
        color: #736f6f;
        margin: 0 0 4px 0;
    }
    .inputContent{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 34px;
    }
    .el-textarea{
        width: 75%;
        margin-right: 10px;
    }
    figure {
        border: thin #c0c0c0 solid;
        display: flex;
        flex-flow: column;
        padding: 5px;
        max-width: 220px;
        margin: 6px auto 4px auto;
    }

    .tipImage{
        font-size: 13px;
        line-height: 20px;
        color: #7f7a7a;
        text-indent: 2em;
        margin-top: 10px;
    }
    .dialogImage img{
        min-width: 418px;
        max-width: 572px;
    }
</style>